﻿<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>test</title>
    <script type="text/javascript" src="../Scripts/jquery-1.7.2.js"></script>
    <style type="text/css">
        .pop-box
        {
            z-index: 9999; /*这个数值要足够大，才能够显示在最上层*/
            margin-bottom: 3px;
            display: none;
            position: absolute;
            background: #FFF;
            border: solid 1px #6e8bde;
        }
        
        .pop-box h4
        {
            color: #FFF;
            cursor: default;
            height: 18px;
            font-size: 14px;
            font-weight: bold;
            text-align: left;
            padding-left: 8px;
            padding-top: 4px;
            padding-bottom: 2px;
            background: url("../images/header_bg.gif") repeat-x 0 0;
        }
        
        .pop-box-body
        {
            clear: both;
            margin: 4px;
            padding: 2px;
        }
        
        
        .mask
        {
            color: #C7EDCC;
            background-color: #C7EDCC;
            position: absolute;
            top: 0px;
            left: 0px;
            filter: Alpha(Opacity=60);
        }
    </style>
    <script language="javascript" type="text/javascript">
        function popupDiv(div_id) {
            var div_obj = $("#" + div_id);
            var windowWidth = document.body.clientWidth;
            var windowHeight = document.body.clientHeight;
            var popupHeight = div_obj.height();
            var popupWidth = div_obj.width();
            //添加并显示遮罩层   
            $("<div id='mask'></div>").addClass("mask")
                                  .width(windowWidth + document.body.scrollWidth)
                                  .height(windowHeight + document.body.scrollHeight)
                                  .click(function () { hideDiv(div_id); })
                                  .appendTo("body")
                                  .fadeIn(200);
            div_obj.css({ "position": "absolute" })
               .animate({ left: windowWidth / 2 - popupWidth / 2,
                   top: windowHeight / 2 - popupHeight / 2, opacity: "show"
               }, "slow");

        }

        function hideDiv(div_id) {
            $("#mask").remove();
            $("#" + div_id).animate({ left: 0, top: 0, opacity: "hide" }, "slow");
        }

        function Dictionary() {
            this.keys = new Array();
            /** 存放数据 */
            this.data = new Object();

            /**  
            * 放入一个键值对  
            * @param {String} key  
            * @param {Object} value  
            */
            this.put = function (key, value) {
                if (this.data[key] == null) {
                    this.keys.push(key);
                }
                this.data[key] = value;
            };

            /**  
            * 获取某键对应的值  
            * @param {String} key  
            * @return {Object} value  
            */
            this.get = function (key) {
                return this.data[key];
            };

            /**  
            * 删除一个键值对  
            * @param {String} key  
            */
            this.remove = function (key) {
                this.keys.remove(key);
                this.data[key] = null;
            };
            /**  
            * 获取键值数组(类似Java的entrySet())  
            * @return 键值对象{key,value}的数组  
            */
            this.entrys = function () {
                var len = this.keys.length;
                var entrys = new Array(len);
                var KeyValue;
                var varValue;
                for (var i = 0; i < len; i++) {
                    KeyValue = this.keys[i];
                    entrys[i] = {
                        key: KeyValue,
                        value: this.data[KeyValue]
                    };
                }
                return entrys;
            };

            /**  
            * 判断Map是否为空  
            */
            this.isEmpty = function () {
                return this.keys.length == 0;
            };

            /**  
            * 获取键值对数量  
            */
            this.size = function () {
                return this.keys.length;
            };
        }
        function TxtAlter() {
            var d = new Dictionary();

            d.put("色彩", "20");
            d.put("价格", "200")
            var tt = d.entrys();
            var str = "";
            for (var i = 0; i < tt.length; i++) {
                str = tt[i].key + "|" + tt[i].value + "," + str;
            }
            $.ajax({
                cache: "False",
                type: "POST",
                async: false,
                url: "GetFile.ashx",
                data: { Where: str },
               
                success: function (obj) { alert(obj) },
                error: function (xhr, ajaxOptions, thrownError)
                { alert("网络异常，稍后重试！"); return false; }
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id='pop-div' style="width: 300px;" class="pop-box">
        <h4>
            标题位置</h4>
        <div class="pop-box-body">
            <p>
                正文内容
            </p>
            <input id="btnClose" type="button" onclick="hideDiv('pop-div');" value="关闭" />
        </div>
    </div>
    <input type="button" id="btnTest" value='test' onclick="popupDiv('pop-div');" />
    <input type="button" id="benGetData" value='test' onclick="TxtAlter()" />
    </form>
</body>
</html>
